<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <script src="./js/getdate.js"></script> -->
	<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&ak=hLqdNZAF6tHexI8jQGshBBjNhgYZXHPv"></script>
    <title>华为太空表盘</title>
    <link type ="text" href="">
    <link rel="stylesheet" type="text/css" href="./css/css.css" >
  </head>
  <body>  
    <!-- 表单的整体框架 -->
    <div class="box-main">
      <!-- 表单的外边框 -->
      <div class="bp-border">
        <!-- 头部电量和天气展示栏 -->
        <div class="top-view">
          <!-- 左上角电量栏 -->
          <div class="top-left-view">
            <img src="./img/rocket-full.png" />
            <div>100%</div>
          </div>
          <!-- 右上角天气栏 -->
          <div class="top-right-view">
            <div class="air-quality">空气优质</div>
            <div class="weather-name">
              <div>多云</div>
              <div>26°</div>
              <img src="./img/sanjiaoxing_shang_o.png" />
            </div>
            <div class="temperature">
              <div>25°</div>
              <div>21°</div>
              <img src="./img/sanjiaoxing_o.png" />
            </div>
            <div class="weather-icon">
              <img src="./img/cloud.png" />
            </div>
          </div>
        </div>
        <!-- 中间时间展示栏 -->
        <div class="middle-view">
          <!-- 头部展示时间 -->
          <div class="time">
            <div class="hour" id="hour">00</div>
            <div>:</div>
            <div class="minute" id="minute">00</div>
            <div class="second" id="second">00</div>
          </div>
          <!-- 日期和农历 -->
          <div class="date">
            <!-- 左侧 -->
            <div class="date-left">
              <!-- 年份 -->
              <div id="years">1998</div>   
              <div>JavaScript</div>
            </div>
            <!-- 右侧 -->
            <div class="date-right">

              <div class="lunar-calendar" id="calendar">三月二十四</div>
              <div class="dateandweek">
                <span class="week-text" id="week">周三</span>
                <span class="date-text" id="sweel">00-00</span>
              </div>
            </div>
          </div>
          <!-- 底部心跳和步数 -->
          <div class="date-bottom">
            <img src="./img/heart-rate-full.png" />
            <div>87</div>
            <img src="./img/bushu.png" class="bushu-img" />
            <div>3299</div>
          </div>
          <!-- 中间旋转太空人 -->
          <div class="center-tkr">
            <img src="./img/tkr.gif" />
          </div>
        </div>
        <!-- 底部的睡眠和距离 -->
        <div class="bottom-view">
          <div class="sleep">
            <div>睡眠</div>
          </div>
          <div class="bottom-number">
            <div>6h55m</div>
            <div>6.5km</div>
          </div>
          <div class="distance">
            <div>距离</div>
          </div>
        </div>
      </div>
    </div>
  </body>

  <script>
    setInterval(()=>{
      // 格式化时间
      var moerdate = new Date();
      //获取完整的年份(4位)
      let years = moerdate.getFullYear();
      //获取月份日期
      let calendar = moerdate.getMonth();
      let arry = ['三十一','一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四','十五','十六','十七','十八','十九','二十','二十一','二十二','二十三','二十四','二十五','二十六','二十七','二十八','二十九','十三']
      let arre = ['一','二','三','四','五','六','七','八','九','十','十一','十二'];
      let days = moerdate.getDate();
      //初始化星期天数
      let arr = ['日','一','二','三','四','五','六'];
      let week = moerdate.getDay();
      //获取小时  document.getElementById("").innerHTML = ;
      let hour = moerdate.getHours();
      //获取分数
      let minute = moerdate.getMinutes();
      //获取秒数
      let second = moerdate.getSeconds();
      document.getElementById("years").innerHTML = years+"年";
      document.getElementById("calendar").innerHTML = arre[calendar]+"月"+arry[days]+"日";
      document.getElementById("sweel").innerHTML = calendar+"-"+days;
      document.getElementById("week").innerHTML = "星期"+arr[week];
      document.getElementById("hour").innerHTML = hour;
      document.getElementById("minute").innerHTML =minute ;
      document.getElementById("second").innerHTML = second;
    },1000);
  </script>
</html>
